<template>
  <div v-if="total <= 8">
    <XueyanPagerPrefix :size="size" :total="total" :count="count" :current="current" :type="prefix"></XueyanPagerPrefix>
    <div
      :style="[styleFixed, styleObj(1), { display: 'inline-block' }]"
      @click="changePage(current - 1)"
      v-if="prevAndNextPage && current !== 1"
    >
      {{ previousText }}
    </div>
    <div v-for="i in total" :style="{ display: 'inline-block' }">
      <div :style="[styleFixed, styleObj(i)]" @click="changePage(i)">{{ i }}</div>
    </div>
    <div
      :style="[styleFixed, styleObj(1), { display: 'inline-block' }]"
      @click="changePage(current + 1)"
      v-if="prevAndNextPage && current !== total"
    >
      {{ nextText }}
    </div>
  </div>
  <div v-else>
    <XueyanPagerPrefix :size="size" :total="total" :count="count" :current="current" :type="prefix"></XueyanPagerPrefix>
    <div :style="[styleFixed, styleObj(-1), { display: 'inline-block' }]" @click="changePage(current - 1)" v-if="prevAndNextPage">
      {{ previousText }}
    </div>
    <div :style="[styleFixed, styleObj(1), { display: 'inline-block' }]" @click="changePage(1)">1</div>
    <a v-if="current > 8">...</a>
    <!--    这里需要动态判断页码  -->
    <div v-for="i in total" :style="{ display: 'inline-block' }" :key="i">
      <template v-if="current <= 4">
        <div
          :style="[styleFixed, styleObj(i)]"
          @click="changePage(i)"
          v-if="Math.abs(i - current) <= 8 - current && i !== 1 && i !== total"
        >
          {{ i }}
        </div>
      </template>
      <template v-if="current > 4 && current < total - 4">
        <div :style="[styleFixed, styleObj(i)]" @click="changePage(i)" v-if="Math.abs(i - current) < 4 && i !== 1 && i !== total">
          {{ i }}
        </div>
      </template>
      <template v-if="current >= total - 4">
        <div :style="[styleFixed, styleObj(i)]" @click="changePage(i)" v-if="Math.abs(total - i + 1) <= 8 && i !== 1 && i !== total">
          {{ i }}
        </div>
      </template>
    </div>
    <a v-if="current < total - 4">...</a>
    <div :style="[styleFixed, styleObj(total), { display: 'inline-block' }]" @click="changePage(total)">{{ total }}</div>
    <div
      :style="[styleFixed, styleObj(1), { display: 'inline-block' }]"
      @click="changePage(current + 1)"
      v-if="prevAndNextPage && current !== total"
    >
      {{ nextText }}
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { pagerPrefixTypes, pagerShapeType } from './pager'
  import { ref, computed } from 'vue'
  import XueyanPagerPrefix from './XueyanPagerPrefix.vue'

  const current = ref(1)

  const total = computed(() => {
    return Math.ceil(props.count / props.size)
  })

  const styleFixed = {
    margin: '2px',
    fontSize: '18px',
    width: '30px',
    height: '30px',
    lineHeight: '30px',
    textAlign: 'center'
  }

  const styleObj = (i: number) => {
    //传入参数为-1的时候,变灰,并且鼠标指针为禁用状态
    let result: any = {}
    if (props.bg === true) {
      if (current.value === i) {
        result.backgroundColor = '#87cebbaa'
      } else {
        result.backgroundColor = '#E2E2E2'
      }
    } else {
      result.border = '1px solid #87ceebaa'
      if (current.value === i) {
        result.color = '#87cebb'
        result.fontWeight = 'bold'
      }
    }

    if (i < 1) {
      result.color = '#AAA'
      result.cursor = 'not-allowed'
    }

    switch (props.shape) {
      case 'circle': {
        result.borderRadius = '100%'
        break
      }
      case 'rounded': {
        result.borderRadius = '5px'
        break
      }
      default: {
        result.borderRadius = '0px'
      }
    }
    return result
  }

  const props = defineProps({
    prefix: {
      type: String,
      values: pagerPrefixTypes,
      default: 'totalAndCurrent'
    },
    previousText: {
      type: String,
      default: '<<'
    },
    nextText: {
      type: String,
      default: '>>'
    },
    count: {
      type: Number,
      default: 1
    },
    size: {
      type: Number,
      default: 10
    },
    bg: {
      type: Boolean,
      default: false
    },
    shape: {
      type: String,
      values: pagerShapeType,
      default: 'rounded'
    },
    prevAndNextPage: {
      type: Boolean,
      default: true
    }
  })

  const changePage = (i: number) => {
    current.value = i
  }
</script>
<style scoped></style>
